<template>
	<el-container id="container">
		<el-aside :width="sideWidht">
			<el-row class="logo" @click.native="changeSideBar"></el-row>
			<el-menu router unique-opened :collapse="isCollapse" background-color="#EEE" text-color="#333" active-text-color="#FF3300">
				<template v-for="row in menus">
					<el-menu-item :key="row.mid" v-if="row.child == null" :title="row.name" :index="'/manage'+(row.controlle ? '/'+row.controlle : '')+(row.method ? '/'+row.method : '')">
						<template slot="title">
							<i :class="'ca '+row.icon"></i>
							<span slot="title">{{row.name}}</span>
						</template>
					</el-menu-item>
					<el-submenu :key="row.mid" v-else :index="'/manage/'+row.controlle">
						<template slot="title">
							<i :class="'ca '+row.icon"></i>
							<span slot="title">{{row.name}}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item v-for="child in row.child" :key="child.mid" :index="'/manage/'+child.controlle+'/'+child.method">
								<i class="el-icon-arrow-right"></i>{{child.name}}</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</template>
			</el-menu>
		</el-aside>

		<el-container>
			<el-header>
				<ul class="pull-right">
					<li>
						<!-- <span @click="update,dialogTableVisible = true">{{userForm.name}}&nbsp; &nbsp;  {{$config.userType[type]}}</span> -->
						<span  @click="dialogTableVisible = true">{{userForm.name}}&nbsp; &nbsp;  {{$config.userType[userForm.type]}}</span>
					<li>
						<i class="el-icon-switch-button"></i>
						<span @click="logout">退出</span>
					</li>
				</ul>
				
				<!-- 编辑用户详细信息 -->
				<el-dialog title="我的信息" :visible.sync="dialogTableVisible" width="35%">
					<el-form ref="userForm" :model="userForm" label-width="80px" size="mini">
						<el-form-item label="姓名">
							<el-input v-model="userForm.name"></el-input>
						</el-form-item>
						<el-form-item label="班级">
							<el-input v-model="userForm.department"></el-input>
						</el-form-item>
						<el-form-item label="专业">
							<el-input v-model="userForm.major"></el-input>
						</el-form-item>
						<el-form-item label="联系方式">
							<el-input v-model="userForm.phone"></el-input>
						</el-form-item>
						<el-form-item label="年龄">
							<el-input type="age" v-model="userForm.age"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-radio-group v-model="userForm.sex">
								<el-radio label="男">男</el-radio>
								<el-radio label="女">女</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="密码">
							<el-input type="password" v-model="userForm.password"></el-input>
						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" v-model="userForm.remarks"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary"  @click="updateUser">修改</el-button>
							<el-button>取消</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				menus: [],
				sideWidht: '180px',
				isCollapse: false,
				dialogTableVisible: false,
				userForm:{
					id:0,
					name:"未登录",
					department:"",
					major:"",
					phone:"",
					type: "0",
					age:0,
					sex:"男",
					password:"",
					remarks:""
				}
			}
		},
		created() {
			this.userForm.id= this.$cookie.get("id")
			this.userForm.name = this.$cookie.get("name")
			this.userForm.department = this.$cookie.get("department")
			this.userForm.major = this.$cookie.get("major")
			this.userForm.phone = this.$cookie.get("phone")
			this.userForm.type = this.$cookie.get("type")
			this.userForm.age = this.$cookie.get("age")
			this.userForm.sex = this.$cookie.get("sex")
			this.userForm.password = this.$cookie.get("password")
			this.userForm.remarks = this.$cookie.get("remarks")
			if (this.$cookie.get("type") == 3) {
				this.menus = [{
				"ord": 0,
				"method": "",
				"controlle": "user",
				"isactive": true,
				"name": "人员管理",
				"icon": "el-icon-user-solid",
				"mid": 24,
				"pid": "0",
				"child": [{
					"ord": 0,
					"method": "lists",
					"controlle": "user",
					"isactive": true,
					"name": "社员管理",
					"icon": "el-icon-arrow-right",
					"mid": 26,
					"pid": "24"
				}]
			}, {
				"ord": 0,
				"method": "index",
				"controlle": "notice",
				"isactive": true,
				"name": "公告管理",
				"icon": "el-icon-s-order",
				"mid": 15,
				"pid": "0",
				"child": [{
					"ord": 0,
					"method": "lists",
					"controlle": "notice",
					"isactive": true,
					"name": "公告信息",
					"icon": "el-icon-arrow-right",
					"mid": 19,
					"pid": "15"
				}]
			}]
			} else if(this.$cookie.get("type") > 3){
					this.menus = [{
					"ord": 0,
					"method": "",
					"controlle": "user",
					"isactive": true,
					"name": "人员管理",
					"icon": "el-icon-user-solid",
					"mid": 24,
					"pid": "0",
					"child": [{
						"ord": 0,
						"method": "new",
						"controlle": "user",
						"isactive": true,
						"name": "新员审核",
						"icon": "el-icon-arrow-right",
						"mid": 27,
						"pid": "24"
					}, {
						"ord": 0,
						"method": "lists",
						"controlle": "user",
						"isactive": true,
						"name": "社员管理",
						"icon": "el-icon-arrow-right",
						"mid": 26,
						"pid": "24"
					}, {
						"ord": 0,
						"method": "out",
						"controlle": "user",
						"isactive": true,
						"name": "淘汰社员",
						"icon": "el-icon-arrow-right",
						"mid": 28,
						"pid": "24"
					}]
				}, {
					"ord": 0,
					"method": "index",
					"controlle": "notice",
					"isactive": true,
					"name": "公告管理",
					"icon": "el-icon-s-order",
					"mid": 15,
					"pid": "0",
					"child": [{
						"ord": 0,
						"method": "lists",
						"controlle": "notice",
						"isactive": true,
						"name": "公告信息",
						"icon": "el-icon-arrow-right",
						"mid": 19,
						"pid": "15"
					}]
				}]
			}else{
				this.menus = [{
					"ord": 0,
					"method": "index",
					"controlle": "notice",
					"isactive": true,
					"name": "公告管理",
					"icon": "el-icon-s-order",
					"mid": 15,
					"pid": "0",
					"child": [{
						"ord": 0,
						"method": "lists",
						"controlle": "notice",
						"isactive": true,
						"name": "公告信息",
						"icon": "el-icon-arrow-right",
						"mid": 19,
						"pid": "15"
					}]
				}]
			}


		},
		mounted() {
			// 页面高度自适应
			let height = window.innerHeight
			let containerApp = document.getElementById('container')
			containerApp.style.height = height + 'px'

		},
		methods: {
			changeSideBar() {
				if (this.isCollapse) {
					this.isCollapse = false
					this.sideWidht = '180px'
				} else {
					this.isCollapse = true
					this.sideWidht = '60px'
				}

				localStorage.setItem('collapse', JSON.stringify({
					isCollapse: this.isCollapse,
					sideWidht: this.sideWidht
				}))
			},
			logout() {
				this.$cookie.remove("name")
				this.$router.push('/')
			},
			updateUser() {
				if (!(/^[\u4E00-\u9FA5]{2,4}$/.test(this.userForm.name))) {
					this.$message("请输入正确的姓名(2-4位汉字)!")
				} else if (!(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/.test(this.userForm.department))) {
					this.$message("请输入正确的班级(2-10位字符)!")
				} else if (!(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/.test(this.userForm.major))) {
					this.$message("请输入正确的专业(2-10位字符)!")
				} else if (!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(this.userForm.phone))) {
					this.$message("请输入正确的手机号(如:18600000000)")
				} else if (!(/^[1-9][0-9]{0,2}$/.test(this.userForm.age))) {
					this.$message("请输入正确的年龄(1-3位数字)!")
				} else if(!(/^[0-9A-Za-z]{6,15}$/.test(this.userForm.password))){
					this.$message("密码不得少于6位和多于16位")
				}else {
					if (this.userForm.password.length == 0) {
						this.userForm.password = null
					}
					this.$axios({
						method: 'post',
						url: '/user/save',
						params: {
							id: this.userForm.id,
							password: this.userForm.password,
							name: this.userForm.name,
							department: this.userForm.department,
							major: this.userForm.major,
							phone: this.userForm.phone,
							sex: this.userForm.sex,
							type: this.userForm.type,
							age: this.userForm.age,
							remarks: this.userForm.remarks,
						}
					}).then(res => {
						console.log(res.data.state)
						if (res.data.state) {
							this.dialogTableVisible = false
								this.$message("修改成功")
						} else {
								this.$message("修改失败")
						}
					}).catch(err => {
						this.$message(err)
					})
				}
			}
		}
	}
</script>

<style scoped>
	.logo {
		width: 220px;
		height: 60px;
		background: #004D91 url(/static/logo.png) no-repeat 0 10%;
		cursor: pointer;
	}

	.el-header ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		color: #FFF;
		margin-top: 20px;
	}

	.el-header li {
		margin-left: 10px;
		cursor: pointer;
	}
</style>
